<template>
  <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
    <lay-col :md="24">
      <lay-col :md="4">
        <AppCatList @node-click="nodeClick"></AppCatList>
      </lay-col>
      <lay-col :md="20">
        <lay-card>
          <lay-row>
            <lay-col :md="24">    
                <lay-form :model="queryModel" ref="layFormRef">
                  <lay-row>
                    <lay-col :md="4">
                      <lay-input size="sm" v-model="queryModel.name" style="width: 90%" placeholder="根据名称查询"></lay-input>
                    </lay-col>
                    <lay-col :md="4">
                      <lay-select size="sm" v-model="queryModel.Cid" placeholder="类别"  style="width: 90%">
                        <lay-select-option :value="0" label="全部类别"></lay-select-option>
                        <lay-select-option v-for="cate in cateList" :value="cate.id" :label="cate.cateName">
                        </lay-select-option>
                      </lay-select>
                    </lay-col>
                    <lay-col :md="4">
                      <lay-select size="sm" v-model="queryModel.status" placeholder="启用状态">
                        <lay-select-option :value="-1" label="启用状态"></lay-select-option>
                        <lay-select-option :value="1" label="启用"></lay-select-option>
                        <lay-select-option :value="0" label="禁用"></lay-select-option>
                      </lay-select>
                    </lay-col>
                    <lay-col :md="4">
                      <lay-form-item label-width="0">
                        <lay-button size="sm" type="primary" @click="GetList(queryModel)" prefix-icon="layui-icon-search">查询
                        </lay-button>
                        <lay-button size="sm" @click="reset">重置</lay-button>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                </lay-form>
            </lay-col>
            <lay-col :md="24">
              <lay-table :page="page" :columns="columns" :dataSource="dataSource" :default-toolbar="defaultToolbar"
                v-model:selectedKeys="selectedKeys" @change="change" :size="tablesize">
                <template v-slot:toolbar>
                  <lay-button type="primary" size="sm" @click="add()" v-permission="PerKey.AppLink_AddOrEditView"
                    prefix-icon="layui-icon-addition">新增链接
                  </lay-button>
                  <lay-button type="primary" size="sm" @click="cateManage()" prefix-icon="layui-icon-tabs">类别管理
                  </lay-button>
                </template>
                <template v-slot:ico="{ data }">
                  <lay-icon :type="data.ico"></lay-icon>
                </template>
                <template v-slot:img="{ data }">
                  <lay-avatar :src="avatar(data.img)" icon="layui-icon-reduce-circle"></lay-avatar>
                </template>
                <template v-slot:changeval="{ data }">
                  <lay-space size="xs">
                    <lay-badge theme="green" v-if="data.status">启用</lay-badge>
                    <lay-badge theme="gray" v-else>禁用</lay-badge>
                  </lay-space>
                </template>
                <template v-slot:operator="{ data }">
                  <lay-button-group>
                    <lay-button type="primary" size="sm" @click="edit(data.id)"
                      v-permission="PerKey.AppLink_AddOrEditView" prefix-icon="layui-icon-edit">
                      编辑
                    </lay-button>
                    <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.AppLink_Delete"
                      prefix-icon="layui-icon-delete">删除
                    </lay-button>
                  </lay-button-group>
                </template>
              </lay-table>
            </lay-col>
          </lay-row>
        </lay-card>
      </lay-col>
    </lay-col>
    <lay-layer :title="addoredittip" v-model="modelVisible" :resize="true" :area="['1000px', '600px']">
      <lay-card style="padding:10px;">
        <lay-row space="10">
          <lay-form :model="form">
            <lay-col :md="24">
              <lay-form-item label="类别" prop="cid" required initValidate>
                <lay-col md="8">
                  <lay-select v-model="form.cid">
                    <lay-select-option v-for="cate in cids" :value="cate.id" :label="cate.cateName"></lay-select-option>
                  </lay-select>
                </lay-col>
              </lay-form-item>
              <lay-form-item label="名称" prop="name" required required-error-message="链接名称不能空">
                <lay-col md="8">
                  <lay-input v-model="form.name"></lay-input>
                </lay-col>
              </lay-form-item>
              <lay-form-item label="url" prop="url">
                <lay-col md="14">
                  <lay-input v-model="form.url"></lay-input>
                </lay-col>
              </lay-form-item>
              <lay-col md="10">
                <lay-form-item label="图标" prop="ico">
                  <lay-col md="22">
                    <lay-icon-picker v-model="form.ico" showSearch></lay-icon-picker>
                  </lay-col>
                </lay-form-item>
              </lay-col>
              <lay-col md="14">
                <lay-form-item label="排序" prop="sort">
                  <lay-col md="6">
                    <lay-input v-model="form.sort"></lay-input>
                  </lay-col>
                  <lay-col md="18" class="tip">只为数字如：2</lay-col>
                </lay-form-item>
              </lay-col>
              <div v-permission="PerKey.Upload_Upload">
                <lay-col md="24">
                  <UploadImg v-model="form.img" uplabel="链接图" :file-size="500"></UploadImg>
                </lay-col>
              </div>
              <lay-form-item label="状态" prop="status">
                <lay-col md="6" class="tip">
                  <lay-switch v-model="form.status" onswitch-text="启用" unswitch-text="禁用"></lay-switch>
                </lay-col>
                <lay-col md="6"> </lay-col>
              </lay-form-item>
              <lay-col :md="24" class="saveBtn">
                <lay-button @click="submitClick" type="primary" v-permission="PerKey.AppLink_AddOrEdit"
                  prefix-icon="layui-icon-ok">
                  {{ addoredittip }}
                </lay-button>
              </lay-col>
            </lay-col>
          </lay-form>
        </lay-row>
      </lay-card>
    </lay-layer>
    <lay-layer title="链接分类" v-model="modelVisibleApplinkCat" :resize="true" :shadeClose="true" :area="['1200px']">
      <AppLinkCat></AppLinkCat>
    </lay-layer>
  </lay-container>
</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne, getEdit, postAdd, putEdit } from "../../../api/module/content/applink";
import { PerKey } from "../../../library/permissionConst"
import { AppLink } from '../../../types/applink'
import UploadImg from '../../../layouts/Upload/UploadImg.vue'
import { systemConfig } from "../../../library/config"
import AppLinkCat from './components/AppLinkCat.vue'
import AppCatList from './components/AppCatList.vue'
const selectedKeys = ref(["1"]);
const defaultToolbar = ref(true);
const page = ref({ total: 0, limit: 15, current: 1, showCount: true, showRefresh: true, limits: [10, 15, 20, 50, 100, 200] });
const tablesize = ref('md');
const avatar = (src: string) => {
  return src != null ? systemConfig.hostURL + src : null
}
const columns = [
  { title: "Id", width: "50px", key: "id", align: "center", },
  { title: "类别", width: "160px", key: "cateName", align: "center", },
  { title: "名称", width: "160px", key: "name", align: "center", },
  { title: "url", key: "url", align: "center", },
  { title: "图标", width: "100px", customSlot: "ico", align: "center", },
  { title: "图片", width: "100px", customSlot: "img", align: "center", },
  { title: "属性", customSlot: "changeval", width: "100px", align: "center", },
  { title: "操作", width: "200px", customSlot: "operator", key: "operator", align: "center", }
]
const dataSource = ref([])
//定义模型
const putData = reactive({
  queryModel: {
    Cid: 0,
    pageNum: page.value.current,
    pageSize: page.value.limit,
    name: null,
    status: -1,
  }
})
const { queryModel } = toRefs(putData)
const cateList = ref({ targetList: [] as any, })

//获取列表
const GetList = function (query: any) {
  if (query != null) {
    queryModel.value.name = query.name
    queryModel.value.status = query.status
  }
  getList(queryModel.value).then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.data.result
      cateList.value = res.data.cateList
      page.value.total = res.data.data.totalNum
    }
  })
}

GetList(queryModel.value)

// 树组件点击
const nodeClick = async (node: any) => {
  queryModel.value.Cid = node.id;
  GetList(queryModel.value)
};

const layFormRef = ref();
const reset = function () {
  layFormRef.value.reset();
}

const change = function ({ current, limit }: any) {
  queryModel.value.pageNum = current
  queryModel.value.pageSize = limit
  GetList(queryModel.value);
};

const edit = function (id: number) {
  changeVisible(id)
}
const add = function () {
  changeVisible(0)
}
const cateManage = function () {
  applinkCatList()
}
//添加或者编辑
const cids = ref({ targetList: [] as any, })
const modelVisible = ref(false)
const data = reactive({
  form: <AppLink><unknown>[]
})
const { form } = toRefs(data)
let addoredittip = ref();
const changeVisible = function (id: number) {
  modelVisible.value = !modelVisible.value
  if (id == 0) {
    addoredittip.value = "新增链接";
    getEdit(id).then((res) => {
      cids.value = res.data.cateList
      form.value = {
        id: 0,
        cid: 0,
        name: "",
        sort: 0,
        url: "",
        ico: "layui-icon-home",
        status: true,
        img: ""
      }
    })
    return
  } else {
    addoredittip.value = "编辑链接";
    getEdit(id).then((res) => {
      cids.value = res.data.cateList
      if (res.status == 1) {
        let data = res.data.data
        form.value = data
      }
    })
    return
  }
}

const submitClick = function () {
  if (!form.value.name) {
    layer.msg("名称不能空")
    return
  }
  if (form.value.cid < 1) {
    layer.msg("请选择类别")
    return
  }
  if (form.value.id == 0) {
    postAdd(form.value).then((res) => {
      done(res)
    });
  } else {
    putEdit(form.value).then((res) => {
      done(res)
    });
  }
};
const done = (res: any) => {
  if (res.status == 1) {
    layer.msg(res.msg, { time: 1000, icon: 1 }, () => { });
    modelVisible.value = !modelVisible.value
    GetList(queryModel.value)
  } else {
    layer.msg(res.msg, { icon: 2 });
    return false;
  }
}

//删除
const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + " " + data.name + "  链接吗？", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList(queryModel.value)
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

//类别管理
const modelVisibleApplinkCat = ref(false)
const applinkCatList = () => {
  modelVisibleApplinkCat.value = !modelVisibleApplinkCat.value
}
</script>
<style scoped>
.tip {
  color: gray;
  line-height: 38px;
  height: inherit;
  padding-left: 10px;
}
</style>